<template>
  <div class="all">
    <header>
      <van-nav-bar
        :title="title + '签约列表'"
        @click-left="back"
      >
        <template #left>
          <div class="fanhui">
            <img src="../../assets/返回.png" alt="">
            <span>返回</span>
          </div>
        </template>
        <template #right>
          <span style="color: #1da4f2" v-show="menuIndex===2" @click="next">下一步</span>
        </template>
      </van-nav-bar>
      <div class="menu">
        <ul>
          <li @click="clickMenu(0)">已签约 ({{addList.length}})</li>
          <li @click="clickMenu(1)">待签约 ({{addIngList.length}})</li>
          <li @click="clickMenu(2)">可签约 ({{noAddList.length}})</li>
        </ul>
      </div>
      <div class="searchMenu" v-show="menuIndex === 2">
        <div class="screen">
          <van-dropdown-menu active-color="#1da4f2">
            <van-dropdown-item v-model="value1" @change="onchange" :options="option1" />
          </van-dropdown-menu>
        </div>
        <div class="search" >
          <van-search
            v-model="searchVal"
            shape="round"
            :placeholder="placeVal"
            left-icon=""
            show-action
          >
            <template #left-icon>
              <div @click="clickSearch">
                <van-icon name="search" />
              </div>
            </template>
            <template #action>
              <div style="" @click="clickSearch" class="sousuo">搜索</div>
            </template>
          </van-search>
        </div>
      </div>
    </header>
    <div class="content" v-show="Number(menuIndex) === 0">
      <div class="divList add"
           v-for="(item, index) in addList"
           :key="index"
           @click="doctorInfo(item.STAFF_ID)"
      >
        <div class="div_top">
          <ul class="ul">
            <li class="li_img">
<!--              <img src="" alt="" v-if="item.PHOTO !== undefined && item.PHOTO !== null">-->
              <img src="../../assets/男医生@2x.png" v-if="item.SEX === 1" alt="">
              <img src="../../assets/女医生@2x.png" v-else-if="item.SEX === 2" alt="">
            </li>
            <li class="li_right">
              <p>
                <span>
                  <a style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</a>
                  <a v-if="item.SEX === 1">男</a>
                  <a v-else-if="item.SEX === 2">女</a>
                  {{item.age}}岁
                </span>
                <span class="new" v-show="menuIndex === 0 && formatDate(new Date(item.sign_start_date)) === formatDate(new Date())">新</span>
              </p>
              <p>
                <span class="health">健康状况: {{item.DISEASE}}</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="div_bottom">
          <ul>
            <li>
              <p class="goodAt">
                <span> <img src="../../assets/擅长@2x.png" class="img" alt=""></span>
                <span class="name">擅长</span>
                <span class="mao">:</span>
                <span class="goodAt_content">{{item.Goodat}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/所属科室@2x.png" class="img" alt=""></span>
                <span class="name">所属科室</span>
                <span class="mao">:</span>
                <span class="">{{item.DEPART}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/从业年限@2x.png" class="img" alt=""></span>
                <span class="name">从业年限</span>
                <span class="mao">:</span>
                <span class="">{{item.YEAR}}年</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/签约日期@2x.png" class="img" alt=""></span>
                <span class="name">签约日期</span>
                <span class="mao">:</span>
                <span class="">{{item.sign_start_date}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/专业级别@2x.png" class="img" alt=""></span>
                <span class="name">专业级别</span>
                <span class="mao">:</span>
                <span class="">{{item.MAJOR}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/服务效期@2x.png" class="img" alt=""></span>
                <span class="name">服务效期</span>
                <span class="mao">:</span>
                <span class="">{{item.fuwuyouxiaoqi}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/所属机构@2x.png" class="img" alt=""></span>
                <span class="name">所属机构</span>
                <span class="mao">:</span>
                <span class="">{{item.HOSPITAL_NAME}}</span>
              </p>
              <span class="agreement" v-show="menuIndex === 0" @click="clickXieyi">协议</span>
            </li>
          </ul>
        </div>
      </div>
      <van-empty
        v-show="addList.length <= 0"
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="无数据"
      />
    </div>
    <div class="content" v-show="Number(menuIndex) === 1">
      <div class="divList addIng"
           v-for="(item, index) in addIngList"
           :key="index"
           >
        <div class="div_top">
          <ul class="ul">
            <li class="li_img">
              <!--              <img src="" alt="" v-if="item.PHOTO !== undefined && item.PHOTO !== null">-->
              <img src="../../assets/男医生@2x.png" v-if="item.SEX === 1" alt="">
              <img src="../../assets/女医生@2x.png" v-else-if="item.SEX === 2" alt="">
            </li>
            <li class="li_right">
              <p>
                <span>
                  <a style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</a>
                  <a v-if="item.SEX === 1">男</a>
                  <a v-else-if="item.SEX === 2">女</a>
                  {{item.age}}岁</span>
                <span class="new" v-show="menuIndex === 0">新</span>
              </p>
              <p>
                <span class="health">健康状况: {{item.DISEASE}}</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="div_bottom">
          <ul>
            <li>
              <p class="goodAt">
                <span> <img src="../../assets/擅长@2x.png" class="img" alt=""></span>
                <span class="name">擅长</span>
                <span class="mao">:</span>
                <span class="goodAt_content">{{item.Goodat}}</span>
              </p>
            </li>
            <li>
              <p>
                <span>
                   <img src="../../assets/所属科室@2x.png" class="img" alt="">
                </span>
                <span class="name">所属科室</span>
                <span class="mao">:</span>
                <span class="">{{item.DEPART}}</span>
              </p>
            </li>
            <li>
              <p>
                <span>
                  <img src="../../assets/从业年限@2x.png" class="img" alt="">
                </span>

                <span class="name">从业年限</span>
                <span class="mao">:</span>
                <span class="">{{item.YEAR}}年</span>
              </p>
            </li>
            <li>
              <p>
                <span>
                   <img src="../../assets/专业级别@2x.png" class="img" alt="">
                </span>

                <span class="name">专业级别</span>
                <span class="mao">:</span>
                <span class="">{{item.MAJOR}}</span>
              </p>
            </li>
            <li>
              <p>
                <span>
                  <img src="../../assets/签约日期@2x.png" class="img" alt="">
                </span>

                <span class="name">提交日期</span>
                <span class="mao">:</span>
                <span class="">{{item.sign_start_date}}</span>
              </p>
            </li>
<!--            <li>-->
<!--              <p>-->
<!--                <img src="../../assets/服务效期@2x.png" class="img" alt="">-->
<!--                <span class="name">服务效期:</span>-->
<!--                <span class="">{{item.fuwuyouxiaoqi}}</span>-->
<!--              </p>-->
<!--            </li>-->
            <li>
              <p>
                <span>
                    <img src="../../assets/所属机构@2x.png" class="img" alt="">
                </span>

                <span class="name">所属机构</span>
                <span class="mao">:</span>
                <span class="">{{item.HOSPITAL_NAME}}</span>
              </p>
              <!--              <span class="agreement" v-show="menuIndex === 0">协议</span>-->
            </li>
          </ul>
        </div>
      </div>
      <van-empty
        v-show="addIngList.length <= 0"
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="无数据"
      />
    </div>
    <div class="content" v-show="Number(menuIndex) === 2">
      <div class="divList noAdd"
           v-for="(item, index) in noAddList"
           :key="index"
           @click="clickDoctor(index, item.USER_ID)">
        <div class="div_top">
          <ul class="ul">
            <li class="li_img">
              <!--              <img src="" alt="" v-if="item.PHOTO !== undefined && item.PHOTO !== null">-->
              <img src="../../assets/男医生@2x.png" v-if="item.SEX === 1" alt="">
              <img src="../../assets/女医生@2x.png" v-else-if="item.SEX === 2" alt="">
            </li>
            <li class="li_right">
              <p>
                <span>
                   <a style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</a>
                  <a v-if="item.SEX === 1">男</a>
                  <a v-else-if="item.SEX === 2">女</a>
                  {{item.age}}岁</span>
                <span class="new" v-show="menuIndex === 0">新</span>
              </p>
              <p>
                <span class="health">健康状况: {{item.DISEASE}}</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="div_bottom">
          <ul>
            <li>
              <p class="goodAt">
                <span> <img src="../../assets/擅长@2x.png" class="img" alt=""></span>
                <span class="name">擅长</span>
                <span class="mao">:</span>
                <span class="goodAt_content">{{item.Goodat}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/所属科室@2x.png" class="img" alt=""></span>
                <span class="name">所属科室</span>
                <span class="mao">:</span>
                <span class="">{{item.DEPART}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/从业年限@2x.png" class="img" alt=""></span>
                <span class="name">从业年限</span>
                <span class="mao">:</span>
                <span class="">{{item.YEAR}}年</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/专业级别@2x.png" class="img" alt=""></span>
                <span class="name">专业级别</span>
                <span class="mao">:</span>
                <span class="">{{item.MAJOR}}</span>
              </p>
            </li>
            <li>
              <p>
                <span> <img src="../../assets/所属机构@2x.png" class="img" alt=""></span>
                <span class="name">所属机构</span>
                <span class="mao">:</span>
                <span class="">{{item.HOSPITAL_NAME}}</span>
              </p>
              <!--              <span class="agreement" v-show="menuIndex === 0">协议</span>-->
            </li>
          </ul>
        </div>
      </div>
      <van-empty
        v-show="noAddList.length <= 0"
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="无数据"
      />
    </div>

  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'HealthSign',
  data () {
    return {
      userid: '',
      title: '',
      menuIndex: 0,
      value1: 1,
      option1: [
        { text: '医生姓名', value: 1 },
        { text: '联系电话', value: 2 },
        { text: '机构', value: 3 },
        { text: '疾病诊断', value: 4 },
        { text: '身份证号', value: 5 }
      ],
      searchVal: '',
      placeVal: '搜索医生姓名',
      type: '',
      addList: [], // 已签约
      addIngList: [], // 待签约
      noAddList: [], // 未签约
      doctorid: '',
      isNoShow: false
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.title = this.$utils.getUrlKey('title')
    this.type = this.$utils.getUrlKey('type')
    console.log(window.sessionStorage.getItem('menuIndex'))
    if (window.sessionStorage.getItem('menuIndex') !== null) {
      this.menuIndex = window.sessionStorage.getItem('menuIndex')
    }
    // 切换签约状态
    this.clickMenu(this.menuIndex)
    // 获取已签约
    this.getAdd()
    //  待签约
    this.getAddIng()
    //  可签约
    this.getNoAdd()
  },
  created () {
  },
  methods: {
    doctorInfo (id) {
      // this.$router.push({path: ''})
    },
    // 点击协议跳转
    clickXieyi () {
      // 点击协议跳转
      this.$router.push({path: '/empower', query: {'title': this.title, 'type': '1'}})
    },
    formatDate (date) {
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + MM + DD
    },
    // 获取已签约
    getAdd () {
      this.$http.jiankangDoctorListYiQian({user_id: this.userid, type: this.type})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.addList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 待签约
    getAddIng () {
      this.$http.jiankangDoctorListDaiQian({user_id: this.userid, type: this.type})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.addIngList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 可签约
    getNoAdd () {
      this.$http.jiankangDoctorListKeQian({
        user_id: this.userid,
        type: this.type,
        type1: this.value1,
        name: this.searchVal
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.noAddList = res.data.data
            this.isNoShow = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击下一步
    next () {
      if ($('.cut').length > 0) {
        sessionStorage.removeItem('activeVal')
        sessionStorage.removeItem('data')
        this.$router.push({path: '/treaty', query: {'userid': this.userid, 'title': this.title, 'doctorid': this.doctorid}})
      } else {
        Toast('还未选择' + this.title)
      }
    },
    // 点击选择未签约医生
    clickDoctor (index, doctorid) {
      if ($('.noAdd').eq(index).hasClass('cut')) {
        this.doctorid = ''
        $('.noAdd').eq(index).removeClass('cut')
      } else {
        $('.noAdd').eq(index).addClass('cut').siblings().removeClass('cut')
        this.doctorid = doctorid
      }
    },
    // 筛选框变化
    onchange () {
      var value = this.value1
      var data = this.option1.filter(function (item) {
        return item.value === value
      })
      this.placeVal = '搜索' + data[0].text
    },
    // 返回
    back () {
      this.$router.history.go(-1)
      window.sessionStorage.removeItem('menuIndex')
    },
    // 点击 签约状态  已签约/待签约/未签约
    clickMenu (index) {
      if (window.sessionStorage.getItem('menuIndex') !== null) {
        this.menuIndex = window.sessionStorage.getItem('menuIndex')
        window.sessionStorage.removeItem('menuIndex')
      } else {
        this.menuIndex = index
      }
      $('.menu li').eq(this.menuIndex).addClass('select').siblings().removeClass('select')
    },
    // 点击搜索框
    clickSearch () {
      this.getNoAdd()
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
  }
  header{
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 99;
  }
  .fanhui{
    height: 100%;
    color: #1da4f2;
    display: flex;
    align-items: center;
  }
  .fanhui img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  /deep/ .van-nav-bar {
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
  }
  /deep/ .van-nav-bar__content{
    width: 100%;
    height: 100%;
  }
  /deep/ .van-nav-bar>div,
  .sousuo,
  /deep/ .van-ellipsis,
  /deep/ .van-field__control
  {
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .menu{
    width: 100%;
    height: 44px;
    display: flex;
  }
  .menu ul{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #FFFFFF;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .menu ul li{
    width: 90px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #1DA4F2;
    box-sizing: border-box;
  }
  .menu ul li:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .menu ul li:nth-child(2){
    border-left: none;
    border-right: none;
  }
  .menu ul li:last-child{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }
  .select{
    background: #1da4f2 !important;
    color: #FFFFFF;
  }
  .searchMenu{
    width: 92%;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }
  .screen{
    display: flex;
    width: 25%;
  }
  .search{
    width: 75%;
  }
  /deep/ .van-dropdown-menu__bar{
    box-shadow: none;
  }
  /deep/ .van-dropdown-menu__title::after{
    border-color: transparent transparent #333 #333;
  }
  .sousuo{
    color: #1da4f2;
  }
  /deep/ .van-dropdown-menu__bar{
    height: 44px;
  }
  /deep/ .van-search{
    padding: 0 6px;
  }
  .divList{
    width: 92%;
    background: #FFFFFF;
    margin: 0 auto;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-top: 5px;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
  }
  .divList:last-child{
    margin-bottom: 50px !important;
  }
  .ul{
    width: 100%;
    height: 70px;
    display: flex;
    /*align-items: center;*/
  }
  .ul li{
    display: flex;
    height: 70px;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  .li_img{
    width: 20%;
    margin: 0 5px;
    box-sizing: border-box;
  }
  .li_right{
    width: 80%;
    display: flex;
    align-content: space-around;
  }
  .health{
    font-size: 13px;
  }
  .li_right a{
    margin-right: 10px;
  }
  .ul .li_right p {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ul .li_right span{
    line-height: 1.7;
  }
  .new{
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 500;
    color: #E3170D;
    background: rgba(227, 23, 13, 0.1);
    border-radius: 2px;
    margin-right: 10px;
  }
  .div_top img{
    width: 60px;
    height: 60px;
  }
  .div_bottom ul{
    padding: 5px;
  }
  .div_bottom li{
    width: 100%;
    display: flex;
    align-items: center;
    /*height: 25px;*/
    justify-content: space-between;
    box-sizing: border-box;
    line-height: 1.8;
  }
  .div_bottom li p{
    display: flex;
    flex-direction: row;
  }
  .name{
    width: 60px;
    text-align: justify;
    text-align-last: justify;
    margin-right: 2px;
  }
  .mao{
    margin-right: 5px;
  }
  .goodAt_content{
    width: 68%;
    display: -webkit-box;
    word-break: break-all;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
  }
  .goodAt{
    /*display: -webkit-box;*/
    /*word-break: break-all;*/
    /*text-overflow:ellipsis;*/
    /*overflow: hidden;*/
    /*white-space: pre-line;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp:2;*/
    /*color: #666666;*/
    /*margin-bottom: 5px;*/
  }
  .goodAt span{
    /*line-height: 1.7;*/
  }
  .img{
    width: 13px;
    height: 14px;
    margin-left: 11px;
    margin-right: 15px;
  }
  .agreement{
    width: 35px;
    height: 18px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1DA4F2;
    margin-right: 10px;
  }
  .agreement, .new, .li_img{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
  }
  .cut{
    background: rgba(29, 164, 242, 0.2) !important;
  }
  /deep/ .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
  /deep/ .van-nav-bar__left, .van-nav-bar__right{
    font-size: 15px;
  }
</style>
